import { reactive, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue';
import page from './page.ts';
export function useListComponent() {
  const { proxy } = getCurrentInstance() as any;
  //页面信息
  const dataInfo: any = reactive({
    loading: false, //加载
    loadingMsg: '列表数据加载中', //加载
    table: {
      title: page.title, //表格-标题
      //表格-内容数据
      tbody: [],
      rowKey: 'specificationCode',
      theadCode: '', //basedatatable
      //表格-表头数据
      thead: [
        {
          label: '物料名称',
          prop: 'goodsName',
          align: 'left', // 默认居中对齐，但原始数据中指定了isFloat为true，可能需要左对齐
          width: 220,
          fixed: true,
          isCanSearch: true,
        },
        {
          label: '规格型号',
          prop: 'specificationName',
          align: 'center', // 默认居中对齐，但原始数据中指定了isFloat为true，可能需要左对齐
          width: 128,
          fixed: true,
          isCanSearch: true,
        },
        {
          label: '供应商',
          prop: 'supplierName',
          align: 'left',
          width: 160,
          isCanSearch: true,
        },
        {
          label: '物料编号',
          prop: 'goodsCode',
          align: 'center',
          width: 100,
          isCanSearch: true,
        },
        {
          label: '计价单位',
          prop: 'priceUnitName',
          align: 'center',
          width: 80,
        },
        {
          label: '物料类型',
          prop: 'categoryName',
          align: 'center',
          width: 80,
        },
        {
          label: '未税均价',
          prop: 'averagePriceBeforeTax',
          align: 'center',
          width: 100,
        },
        {
          label: '含税均价',
          prop: 'averagePrice',
          align: 'center',
          width: 100,
        },
        {
          label: '期初',
          prop: '',
          align: 'center',
          width: null,
          children: [
            {
              label: '数量',
              prop: 'initialQuantity',
              align: 'center',
              width: 100,
            },
            {
              label: '未税',
              prop: 'initialSubtotalBeforeTax',
              align: 'center',
              width: 100,
            },
            {
              label: '含税',
              prop: 'initialSubtotal',
              align: 'center',
              width: 100,
            },
          ],
        },
        {
          label: '当月采购',
          prop: '',
          align: 'center',
          width: null,
          children: [
            {
              label: '数量',
              prop: 'nowPurchaseQuantity',
              align: 'center',
              width: 100,
            },
            {
              label: '未税',
              prop: 'nowPurchaseSubtotalBeforeTax',
              align: 'center',
              width: 100,
            },
            {
              label: '含税',
              prop: 'nowPurchaseSubtotal',
              align: 'center',
              width: 100,
            },
          ],
        },
        {
          label: '实际领料',
          prop: '',
          align: 'center',
          width: null,
          children: [
            {
              label: '数量',
              prop: 'nowGetProduceMaterialQuantity',
              align: 'center',
              width: 100,
            },
            {
              label: '未税',
              prop: 'nowGetProduceMaterialSubtotalBeforeTax',
              align: 'center',
              width: 100,
            },
            {
              label: '含税',
              prop: 'nowGetProduceMaterialSubtotal',
              align: 'center',
              width: 100,
            },
          ],
        },
        {
          label: '当月退货',
          prop: '',
          align: 'center',
          width: null,
          children: [
            {
              label: '数量',
              prop: 'nowStockGoodsCreditQuantity',
              align: 'center',
              width: 100,
            },
            {
              label: '未税',
              prop: 'nowStockGoodsCreditSubtotalBeforeTax',
              align: 'center',
              width: 100,
            },
            {
              label: '含税',
              prop: 'nowStockGoodsCreditSubtotal',
              align: 'center',
              width: 100,
            },
          ],
        },
        {
          label: '当月盘盈',
          prop: '',
          align: 'center',
          width: null,
          children: [
            {
              label: '数量',
              prop: 'nowTakeStockProfitQuantity',
              align: 'center',
              width: 100,
            },
            {
              label: '未税',
              prop: 'nowTakeStockProfitSubtotalBeforeTax',
              align: 'center',
              width: 100,
            },
            {
              label: '含税',
              prop: 'nowTakeStockProfitSubtotal',
              align: 'center',
              width: 100,
            },
          ],
        },
        {
          label: '当月盘亏',
          prop: '',
          align: 'center',
          width: null,
          children: [
            {
              label: '数量',
              prop: 'nowTakeStockLossQuantity',
              align: 'center',
              width: 100,
            },
            {
              label: '未税',
              prop: 'nowTakeStockLossSubtotalBeforeTax',
              align: 'center',
              width: 100,
            },
            {
              label: '含税',
              prop: 'nowTakeStockLossSubtotal',
              align: 'center',
              width: 100,
            },
          ],
        },
        {
          label: '其他入库',
          prop: '',
          align: 'center',
          width: null,
          children: [
            {
              label: '数量',
              prop: 'nowOtherInQuantity',
              align: 'center',
              width: 100,
            },
            {
              label: '未税',
              prop: 'nowOtherInSubtotalBeforeTax',
              align: 'center',
              width: 100,
            },
            {
              label: '含税',
              prop: 'nowOtherInSubtotal',
              align: 'center',
              width: 100,
            },
          ],
        },
        {
          label: '其他出库',
          prop: '',
          align: 'center',
          width: null,
          children: [
            {
              label: '数量',
              prop: 'nowOtherOutQuantity',
              align: 'center',
              width: 100,
            },
            {
              label: '未税',
              prop: 'nowOtherOutSubtotalBeforeTax',
              align: 'center',
              width: 100,
            },
            {
              label: '含税',
              prop: 'nowOtherOutSubtotal',
              align: 'center',
              width: 100,
            },
          ],
        },
        {
          label: '期末',
          prop: '',
          align: 'center',
          width: null,
          children: [
            {
              label: '数量',
              prop: 'finalQuantity',
              align: 'center',
              width: 100,
            },
            {
              label: '未税',
              prop: 'finalSubtotalBeforeTax',
              align: 'center',
              width: 100,
            },
            {
              label: '含税',
              prop: 'finalSubtotal',
              align: 'center',
              width: 100,
            },
          ],
        },
      ],
      //表格-搜索数据
      search: {
        pageIndex: 1, //当前页码
        pageSize: 30, //每页显示数据的数量
        totalCount: 0, //总数量
        queryDataBaseFiled: '', // 关键字查询字段，空值查询全部
        likeWords: '', // 查询关键字，空值查询全部
        beginTime: proxy.$getTimeAgo(1, 'months'), // 日期范围-开始时间
        endTime: proxy.$day(new Date()), // 日期范围-结束时间
        categoryCode: '', // 物料分类编码
        resultFilter: [], // 选取后只需要显示选取相关的数据列，不选择默认为全部
      },
      //多选
      checkbox: {
        state: true,
        selectable: (row?: any) => {
          return true;
        },
        list: [],
      },
      //表格-按钮数据
      btns: [
        {
          title: '导出数据',
          icon: 'Download',
          type: '',
          children: [
            {
              title: '导出当页数据',
              click: () => {
                setLoading('导出当页数据,请稍等');
                exportBtn(dataInfo.table.tbody);
              },
            },
            {
              title: '导出全部数据',
              click: () => {
                setLoading('正在导出全部数据,请稍等');
                proxy.$api.Report.PageQueryStockBalancesReport({
                  ...dataInfo.table.search,
                  pageIndex: 1,
                  pageSize: 10000,
                  beginTime: dataInfo.table.search.beginTime || proxy.$getTimeAgo(1, 'years'), // 开始时间
                  endTime: dataInfo.table.search.endTime || proxy.$day(new Date()), // 结束时间
                })
                  .then((res: any) => {
                    exportBtn(res.list);
                  })
                  .catch(() => {
                    dataInfo.loading = false;
                  });
              },
            },
            {
              title: '导出选中数据',
              click: () => {
                setLoading('导出选中数据,请稍等');
                exportBtn(dataInfo.table.checkbox.list);
              },
            },
          ],
        },
      ],
    },
  });
  const options = reactive({
    goodsCategory: [],
  });
  // 获取表数据
  const getTbody = () => {
    let _table: any = dataInfo.table;
    setLoading();
    proxy.$api.Report.PageQueryStockBalancesReport(_table.search)
      .then((res: any) => {
        _table.tbody = res.list;
        _table.search.totalCount = res.totalCount;
        dataInfo.loading = false;
      })
      .catch(() => {
        dataInfo.loading = false;
      });
  };
  // 导出数据
  const exportBtn = (tbody: any[]) => {
    proxy.$exportData(
      {
        thead: dataInfo.table.thead,
        tbody: tbody,
        fileName: dataInfo.table.title,
      },
      dataInfo,
    );
    dataInfo.loading = false;
  };
  const setLoading = (title: string = '正在获取数据,请稍等...') => {
    if (!dataInfo.loading) {
      dataInfo.loading = true;
      dataInfo.loadingMsg = title;
    }
  };
  // 组件挂载后执行
  onMounted(() => {
    getTbody();
  });
  // 组件卸载前执行
  onBeforeUnmount(() => {});
  return { dataInfo, getTbody, options };
}
